import { Role } from '@/utils/types.d';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { ProTable, ActionType, ProColumns } from '@ant-design/pro-components';
import { useRef, useState } from 'react';
import { useModel } from 'umi';
import { queryParkinglotNames } from '../Parking/Spot/service';
import DetailModal from './components/DetailModal';
import { queryExceptionOrder } from './service';
import { ExceptionOrderTableItem } from './types.d';

const ExceptionOrder = () => {
  const { initialState } = useModel('@@initialState');
  const currUser = initialState?.currentUser;
  const isAdmin = currUser?.role === Role.ADMIN;
  const [visible, setVisible] = useState<boolean>(false);
  const [currId, setCurrId] = useState<string>('');
  const actionRef = useRef<ActionType>();

  const columns: ProColumns<ExceptionOrderTableItem>[] = [
    {
      title: '所属用户',
      dataIndex: 'ownerId',
      width: 80,
      align: 'center',
      hideInTable: !isAdmin,
      hideInSearch: true,
    },
    {
      title: '订单编号',
      dataIndex: 'orderNo',
      width: 140,
      align: 'center',
      hideInForm: true,
    },
    {
      title: '路段名称',
      dataIndex: 'parkingLotId',
      hideInForm: true,
      width: 120,
      align: 'center',
      render: (_, record) => record.parkingLotName,
      fieldProps: { showSearch: true },
      debounceTime: 300,
      request: (val) => queryParkinglotNames(val.keyWords),
    },
    {
      title: '泊位编号',
      dataIndex: 'spotId',
      hideInForm: true,
      width: 80,
      // hideInTable: true,
      align: 'center',
    },
    {
      title: '车牌号码',
      dataIndex: 'plateNumber',
      align: 'center',
      width: 100,
      hideInForm: true,
    },
    {
      title: '异常类型',
      dataIndex: 'type',
      width: 120,
      align: 'center',
      hideInForm: true,
      valueEnum: {
        1: { text: '车牌冲突', status: 'Error' },
        2: { text: '车牌变更', status: 'Error' },
        3: { text: '地磁有车，巡检无车', status: 'Error' },
        4: { text: '地磁无车，巡检有车', status: 'Error' },
      },
    },
    {
      title: '创建时间',
      width: 180,
      dataIndex: 'createTime',
      align: 'center',
      hideInForm: true,
      hideInSearch: true,
      valueType: 'dateTime',
    },
    {
      title: '处理状态',
      width: 80,
      dataIndex: 'status',
      align: 'center',
      hideInForm: true,
      valueEnum: {
        1: { text: '待处理', status: 'Processing' },
        2: { text: '已处理', status: 'Success' },
        3: { text: '已作废', status: 'Default' },
      },
    },
    {
      title: '关联订单',
      dataIndex: 'relatedOrderNo',
      width: 120,
      hideInForm: true,
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '开始时间',
      dataIndex: 'startTime',
      hideInForm: true,
      hideInTable: true,
      valueType: 'dateTime',
    },
    {
      title: '结束时间',
      dataIndex: 'endTime',
      hideInForm: true,
      hideInTable: true,
      valueType: 'dateTime',
    },
    {
      title: '操作',
      width: 80,
      valueType: 'option',
      align: 'center',
      fixed: 'right',
      render: (_, record) => {
        return [
          <a
            key={record._id}
            onClick={() => {
              setCurrId(record._id);
              setVisible(true);
            }}
          >
            详情
          </a>,
        ];
      },
    },
  ];

  return (
    <PageHeaderWrapper
      header={{
        title: '',
        subTitle: '订单管理',
        breadcrumb: {
          routes: [
            {
              path: '/',
              breadcrumbName: '首页',
            },
            {
              path: '/order',
              breadcrumbName: '订单管理',
            },
            {
              path: '/order/exception-list',
              breadcrumbName: '异常订单',
            },
          ],
        },
      }}
    >
      <ProTable<ExceptionOrderTableItem>
        columns={columns}
        rowKey="_id"
        scroll={{ x: true }}
        style={{ whiteSpace: 'nowrap' }}
        search={{ labelWidth: 'auto' }}
        columnEmptyText="暂无数据"
        pagination={{
          showSizeChanger: true,
          showQuickJumper: true,
          defaultPageSize: 10,
          size: 'default',
        }}
        actionRef={actionRef}
        debounceTime={300}
        request={async (param, sort) => {
          const res = await queryExceptionOrder(param, sort);
          return res;
        }}
      />
      {currId && visible && (
        <DetailModal
          id={currId}
          visible={visible}
          close={() => {
            setVisible(false);
            setCurrId('');
          }}
          reload={() => {
            actionRef.current?.reload();
          }}
        />
      )}
    </PageHeaderWrapper>
  );
};

export default ExceptionOrder;
